<template>
  <div>
    <el-empty
      v-if="data.dataList.length === 0"
      description="监听事件列表为空"
      style="margin: 10px 30px"
    />
    <el-table
      v-else
      ref="tableDataRef"
      :data="data.dataList"
      border
      max-height="500"
      highlight-current-row
      @row-click="handleCurrentChange"
    >
      <el-table-column type="index" label="操作" width="55">
        <template #default="scope">
          <el-button
            icon="Minus"
            size="small"
            type="danger"
            circle
            @click="handleEventDelete(scope.$index)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="methods" label="触发时机" width="130" show-overflow-tooltip>
        <template #default="scope">
          <DictTag :options="data.flowMethods" :value="scope.row.methods" />
        </template>
      </el-table-column>
      <el-table-column prop="listenerName" label="事件处理器" width="130" show-overflow-tooltip />
      <el-table-column prop="conditionType" label="条件模式" width="130" show-overflow-tooltip>
        <template #default="{ row }">
          <el-radio-group v-model="row.conditionType" disabled>
            <el-radio
              v-for="(item, index) in DIC_PROP.VAL_TYPE"
              :key="index"
              :value="item.value"
              :label="item.label"
            />
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column prop="groupItemType" label="组内条件关系" show-overflow-tooltip>
        <template #default="{ row }">
          <el-switch
            v-model="row.groups[0].groupItemType"
            disabled
            active-value="0"
            inactive-value="1"
            inactive-text="或"
            active-text="且"
          />
        </template>
      </el-table-column>
      <el-table-column prop="conditionsCount" label="组内条件数量" show-overflow-tooltip>
        <template #default="{ row }">
          <el-tag>{{ row.groups[0].conditions.length }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="70" show-overflow-tooltip />
      <el-table-column prop="sort" label="排序" width="70" show-overflow-tooltip />
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watchEffect } from "vue";
import { DIC_PROP } from "../../ProcessDict";
import DictTag from "@/components/dictTag.vue";
import { type FlowModelNode } from "../../ProcessDef";

const _value: any = defineModel<FlowModelNode>();
const emits = defineEmits(["change"]);

const tableDataRef = ref(null);

const data = reactive({
  dataList: [],
  flowMethods: []
});

onMounted(() => {
  data.dataList = _value.value.props.listeners;
  data.flowMethods = DIC_PROP.NODE_METHODS;
});

watchEffect(() => {
  data.dataList = _value.value.props.listeners;
});

const handleCurrentChange = row => {
  if (!row) return;
  const form: any = {};
  form.listenerId = row.listenerId;
  form.listenerName = row.listenerName;
  form.methods = row.methods;
  form.conditionType = row.conditionType;
  form.remark = row.remark;
  form.sort = row.sort;
  form.groups = row.groups;
  form.eventParams = row.eventParams;
  emits("change", form);
};

const handleEventDelete = (index: number) => {
  _value.value.props.listeners.splice(index, 1);
};
</script>
